<template>
  <div :id="id" style="width: 100%; height: 100%">

  </div>
</template>

<script>
export default {
  name: "SimplePie",
  props: {
    id: {
      Type: String,
      default: 'simple-pie'
    },
    title: {
      Type: String,
      default: '饼图'
    },
    subtext: {
      Type: String,
      default: ''
    },
    data: Array,
    keyName: {
      Type: String,
      default: 'key'
    },
    valueName: {
      Type: String,
      default: 'value'
    },
    tooltipUnit: {
      Type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    update() {
      if (!this.chart) {
        this.draw();
        return ;
      }
      this.chart.showLoading();
      let option = this.chart.getOption();
      option.series[0].data = this.dataSource;
      option.legend[0].data = this.legend;
      this.chart.setOption(option);
      this.chart.hideLoading();
    },
    async draw() {
      setTimeout(() => {
        this.chart = this.$echarts.init(document.getElementById(this.id));
        this.chart.setOption({
          title: {
            text: this.title,
            subtext: this.subtext,
            x: "center",
            top: 20
          },
          tooltip: {
            trigger: "item",
            confine: true,
            formatter: "{b}: {c}" + this.tooltipUnit + " ({d}%)"
          },
          // dataset: {
          //   source: this.dataSource
          // },
          legend: {
            left: 10,
            top: 20,
            type: 'scroll',
            orient: 'vertical',
            data: this.legend
          },
          toolbox: {
            right: 20,
            top: 10,
            show: true,
            feature: {
              mark: {
                show: true
              },
              // restore: {
              //   show: true
              // },
              saveAsImage: {
                show: true
              }
            }
          },
          series: [
            {
              name: "饼图",
              type: "pie",
              radius: [30, 90],
              center: ["50%", "50%"],
              // roseType: "radius",
              minAngle: 5,
              label: {
                show: true
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              data: this.dataSource
            }
          ],
          calculable: true,
          animation: true
        });
      }, 1000)

    }
  },
  computed: {
    legend: function () {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      return this.data
          .sort((a, b) => b[this.valueName] - a[this.valueName])
          .map(item => item[this.keyName]);
    },
    dataSource: function () {
      return this.data.map(item => {
        return {
          name: item[this.keyName],
          value: item[this.valueName]
        }
      });
    }
  },
  watch: {
    data: function (val) {
      if (!val) {
        return;
      }
      this.update();
    }
  },
  mounted() {
    // this.draw();
  }
}
</script>

<style scoped lang="less">

</style>
